<script setup>
import { getshortvideo } from "../api/home";
import { onMounted, reactive } from 'vue';
const ShortVideo = reactive({
  alist: [],
});

onMounted(() => {
  getshortvideo(10).then(res => {
    console.log('小视频列表', res);
    ShortVideo.alist = res.data.data.feeds;
  });
});
</script>
<template>
    <div>
      <div class="short-videos">
        <router-link v-for="feed in ShortVideo.alist" :key="feed.id" :to="`/video/${feed.id}`" tag="div" class="feed-item" >
            <div class="image-wrapper" :style="`background-image: url('${feed.images[0].url}');background-size: cover;background-position: center center;` ">
                <div class="title">{{ feed.title }}</div>
                <div class="video-user">
                  <div class="userimg">
                    <img :src="feed.user.avatarurl" alt="">
                  </div>
                    <div class="user-name">{{ feed.user. nickName}}</div>
                    <div class="like-count"><img src="../assets/images/dianzhan.png" alt="" class="up"><p>{{ feed.upCount }}</p></div>
                </div>
            </div>
        </router-link>
      </div>
    </div>
  </template>
  
  <style scoped lang="scss">  
.short-videos {  
  display: flex;  
  flex-wrap: wrap; 
  height:calc(100vh - 100px);
    overflow-y:auto;
  
}  
  
.feed-item {  
  flex: 0 0 50%;
  display: flex;
  position: relative;  
}  
  
.image-wrapper {  
  flex: 1 0 50%;
  height: 284px;  
  width: auto;  
  position: relative;  
  margin: 1px; 
  
   
  .title {  
position: relative;  
  line-height: 1.2;   
  font-size: 15px;  
  color:#a0a187; 
  overflow: hidden;
  top: 210px;
  display: -webkit-box;
  -webkit-line-clamp: 2; 
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  
}  

.video-user {  
    display: flex;
    align-items: center;
    position: relative; 
    margin-top: 10px;
    top: 200px;
  .user-info {  
  display: flex;  
  align-items: center;  
} 
.userimg {  
  height: 25px;
  width: 25px;
  border-radius: 50%; 
  overflow: hidden;
}
.user-name{
font-size: 15px;  
  color: #a0a187;  
  margin-left: 8px;
}
.like-count  {
  display: flex;
    margin-left: 20px;
    display: flex; 
    height: 25px;
    width: 40px;
    color: #a0a187;  
   

    .up{
        max-height: 20px;
        max-width: 20px;
        margin-right: 4px; 
    }

    p{
        font-size: 15px;
        position: relative;
        top:6px;
    }
}
}  
}  
</style>
  
  
  